<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>体验websocket</title>
    <style>
      #contanier {
        width: 500px;
        height: 400px;
        border: 2px dashed #7575e7;
        overflow-y: auto;
      }
    </style>
  </head>

  <body>
    <div id="contanier"></div>
    <!-- 1  建立连接 (拨号) -->
    <!-- 2  发消息 接消息 -->
    <!-- 3  关闭连接 -->
    <input type="text" id="message" />
    <button id="btn1">建立连接</button>
    <button id="btn2">发送消息</button>
    <button id="btn3">关闭连接</button>

    <script>
      var dom = document.getElementById('contanier')
      var inputDom = document.getElementById('message')
      var btn1 = document.getElementById('btn1')
      var btn2 = document.getElementById('btn2')
      var btn3 = document.getElementById('btn3')

      var isOpen = false // 表示是否已经建立了拨号
      var ws // 别的方法 也需要使用ws
    </script>
  </body>
</html>
